<!-- 视频弹窗 -->
<div class="com-pop-video">
  <div class="com-pop-video-box">
    <div class="com-pop-content">
      <video
        class="pop-video"
        src="static/video/1.mp4"
        controls="controls"
        autoplay="autoplay"
        muted="muted"
        loop="loop"
      ></video>
      <img class="pop-img" src="static/img/1.jpg" alt="ctmon" />
    </div>
  </div>
  <div class="close-pop-btn">X</div>
</div>

<style>
  /* 常用视频弹窗 */
  .com-pop-video.active {
    display: flex;
  }
  .com-pop-video {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .com-pop-video .com-pop-video-box {
    max-width: 70%;
    max-height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .com-pop-video-box video {
    max-width: 100%;
  }

  .com-pop-video .close-pop-btn {
    position: absolute;
    right: 20px;
    bottom: calc(100% + 10px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    top: 20px;
  }
  .com-pop-video .close-pop-btn:hover {
    cursor: pointer;
    background-color: #f1f1f1;
  }
  @media (max-width: 768px) {
    .com-pop-video .com-pop-video-box {
      max-width: 90%;
      max-height: 90%;
    }
  }
</style>

<script defer>
  //  弹窗按钮类名 视频video-pop-btn  图片img-pop-btn    属性video-data  属性img-data
  // 弹窗com-pop
  const com_video = document.querySelector('.com-pop-video');
  const video_box = document.querySelector('.com-pop-video-box');
  if (com_video) {
    var video_clone = video_box.querySelector('.pop-video').cloneNode(true);
    var img_clone = video_box.querySelector('.pop-img').cloneNode(true);
    var com_pop_content = video_box.querySelector('.com-pop-content');
    com_pop_content.innerHTML = '';

    const video_pop_btn = document.querySelectorAll('.video-pop-btn');
    const img_pop_btn = document.querySelectorAll('.img-pop-btn');

    video_pop_btn.forEach((item) => {
      item.addEventListener('click', () => {
        com_video.classList.add('active');
        if (item.getAttribute('video-data')) {
          com_pop_content.innerHTML = '';
          video_clone.src = item.getAttribute('video-data');
          com_pop_content.appendChild(video_clone);
        }
      });
    });

    img_pop_btn.forEach((item) => {
      item.addEventListener('click', () => {
        com_video.classList.add('active');
        if (item.getAttribute('img-data')) {
          com_pop_content.innerHTML = '';
          img_clone.src = item.getAttribute('img-data');
          com_pop_content.appendChild(img_clone);
        }
      });
    });

    const video_btn = com_video.querySelector('.close-pop-btn');
    video_btn.addEventListener('click', () => {
      com_video.classList.remove('active');
      if (com_video.querySelector('video')) {
        com_video.querySelector('video').pause();
      }
    });
    com_video.addEventListener('click', (e) => {
      if (e.target.classList.contains('com-pop-video')) {
        com_video.classList.remove('active');
        if (com_video.querySelector('video')) {
          com_video.querySelector('video').pause();
        }
      }
    });
  }
</script>
<!-- 视屏弹窗end  -->
